<template>
  <view :style="colorStyle"> </view>
</template>

<script>
import {
  userinfo,
  userTopicPage,
  userLikesPage,
  userCommentPage,
  socialUserInfo,
} from "@/servers/servers.js";
import { HTTP_STATUS } from "@/servers/config.js";
import colors from "@/mixins/color";
import { go, loading } from "../../utils/wxAPI";
import { getToken } from "../../utils/storage";
export default {
  mixins: [colors],
  data() {
    return {
      menuInfo: {},
      navTitleModuleStyle: "",
      tablist: [
        {
          name: "作品",
        },
        {
          name: "点赞",
        },
        {
          name: "评论",
        },
      ],
      tablistindex: 0,
      info: {},
      total: {},
      list: [],
      listTotal: 0,
      current: 1,
    };
  },
  async onLoad() {
    // #ifdef MP-WEIXIN
    this.menuInfo = getApp().globalData.menuInfo;
    this.navTitleModuleStyle = `height:${
      this.menuInfo.height + this.menuInfo.top + 10
    }px`;
    // #endif
    if (getToken()) {
      this.userTopicPage();
    }
  },
  async onShow() {
    if (getToken()) {
      // this.userinfo();
      this.socialUserInfo();
    }
  },
  methods: {
    async userTopicPage() {
      loading();
      let { data } = await userTopicPage({
        current: this.current,
        size: 10,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        this.listTotal = data.data.total;
        let list = data.data.records;
        if (this.current == 1) {
          this.list = list;
        } else {
          this.list.push(...list);
        }
      }
      uni.stopPullDownRefresh();
      uni.hideLoading();
    },
    async userLikesPage() {
      loading();
      let { data } = await userLikesPage({
        current: this.current,
        size: 10,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        this.listTotal = data.data.total;
        let list = data.data.records;
        if (this.current == 1) {
          this.list = list;
        } else {
          this.list.push(...list);
        }
      }
      uni.stopPullDownRefresh();
      uni.hideLoading();
    },
    async userCommentPage() {
      loading();
      let { data } = await userCommentPage({
        current: this.current,
        size: 10,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        this.listTotal = data.data.total;
        let list = data.data.records;
        if (this.current == 1) {
          this.list = list;
        } else {
          this.list.push(...list);
        }
      }
      uni.stopPullDownRefresh();
      uni.hideLoading();
    },
    async socialUserInfo() {
      loading();
      let { data } = await socialUserInfo();
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let info = data.data;
        this.total = info;
      }
      uni.hideLoading();
      uni.stopPullDownRefresh();
    },
    async userinfo() {
      loading();
      let { data } = await userinfo();
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let info = data.data;
        this.info = info;
      }
      uni.hideLoading();
      uni.stopPullDownRefresh();
    },
    gourl(url) {
      go(url);
    },
    tablistChange(index) {
      this.tablistindex = index;
      this.current = 1;
      this.list = [];
      if (this.tablistindex == 0) {
        this.userTopicPage();
      }
      if (this.tablistindex == 1) {
        this.userLikesPage();
      }
      if (this.tablistindex == 2) {
        this.userCommentPage();
      }
    },
  },
  onReachBottom() {
    if (this.list.length == this.listTotal) return;
    this.current += 1;
    if (this.tablistindex == 0) {
      this.userTopicPage();
    }
    if (this.tablistindex == 1) {
      this.userLikesPage();
    }
    if (this.tablistindex == 2) {
      this.userCommentPage();
    }
  },
  onPullDownRefresh() {
    // this.userinfo();
    this.socialUserInfo();
    this.current = 1;
    if (this.tablistindex == 0) {
      this.userTopicPage();
    }
    if (this.tablistindex == 1) {
      this.userLikesPage();
    }
    if (this.tablistindex == 2) {
      this.userCommentPage();
    }
  },
};
</script>
<style>
/* #ifdef MP-WEIXIN */
page {
  background: #f5f5f5;
}

/* #endif */
</style>
<style lang="scss" scoped>
page {
  background: #f5f5f5;
}

.bg {
  width: 100%;
  position: absolute;
  top: 0;

  image {
    width: 100%;
  }

  .bg1 {
    position: absolute;
    top: 0;
    z-index: 1;
  }
}

.infobox1 {
  position: relative;
  z-index: 1;
  margin: 0rpx 30rpx 0;

  .block2 {
    width: 128rpx;
    height: 128rpx;
    border-radius: 50%;
  }

  .block1 {
    margin-left: 20rpx;
    width: calc(100% - 20rpx - 128rpx);

    .info1 {
    }

    .info2 {
      margin: 8rpx 0 0;

      .tip1 {
      }

      image {
        width: 36rpx;
        height: 36rpx;
        margin-left: 4rpx;
      }
    }

    .info3 {
      margin: 8rpx 0 0;

      .tip1 {
        background: #fff;
        border-radius: 12rpx;
        padding: 7rpx 12rpx;
        margin: 0 12rpx 0 0;
      }
    }
  }

  .setting {
    position: absolute;
    right: 0;
    border-radius: 80rpx;
    background: var(--view-theme);
    box-shadow: 0px 15rpx 27.8rpx 0px rgba(29, 176, 252, 0.4);
    padding: 10rpx 38rpx;
  }
}

.infobox2 {
  position: relative;
  z-index: 1;
  text-align: center;
  margin: 44rpx 30rpx 0;
  // background: #fff;
  // border-radius: 28rpx;
  padding: 36rpx 0;

  .block1 {
    .info2 {
      margin: 6rpx 0 0;
    }
  }
}

.infobox3 {
  background: #fff;
  position: relative;
  border-radius: 24rpx 24rpx 0 0;
  z-index: 99;
  overflow: hidden;
  // padding: 0 30rpx;
  // min-height: 500rpx;

  .listbox {
    // margin: 30rpx 0 0;
    background: #f5f5f5;
    padding: 30rpx 30rpx 0;
  }

  .list {
    border-radius: 8rpx;
    background: #fff;
    width: 337rpx;
    margin: 0 0 24rpx 0;
    overflow: hidden;

    .imgbox {
      position: relative;

      .img {
        width: 336rpx;
        height: 448rpx;
        border-radius: 8rpx 8rpx 0px 0px;
      }

      .tip1 {
        position: absolute;
        border-radius: 25rpx;
        background: rgba(0, 0, 0, 0.8);
        padding: 5rpx 17rpx;
        left: 14rpx;
        bottom: 14rpx;
        z-index: 1;
      }
    }

    .block1 {
      padding: 16rpx;
    }

    .block2 {
      margin: 16rpx;

      .left {
        .icon1 {
          width: 40rpx;
          height: 40rpx;
          border-radius: 50%;
        }

        .name {
          margin-left: 16rpx;
        }
      }

      .right {
        .num {
        }
      }
    }
  }

  .listbox2 {
    // background: #fff;
    // min-height: 1000rpx;
    // padding: 0 30rpx;
    background: transparent;
    // margin: 0;
  }

  .list2 {
    // background: #fff;
    border-bottom: 1px solid #f5f5f5;
    width: 100%;
    padding: 30rpx;

    .left {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
    }

    .right {
      margin-left: 20rpx;
      width: calc(100% - 20rpx - 80rpx);

      .block2 {
        margin: 8rpx 0;
      }

      .block3 {
        margin: 0 0 8rpx 0;
      }
    }
  }
}
</style>
